<template>
    <div>
        <web-header show="group" />
        <div class="title_a" style="padding-top: 30px">
            <div class="title_en">Classic project</div>
            <div class="title_cn">经典项目</div>
            <div class="title_txt">海量特色拓展项目，海陆空项目一起来更精彩</div>
        </div>
        <div class="box_a">
            <ul>
                <li>
                    <a @click="changeList(81)" href="javascript:void(0)"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/7.png" />
                        <span>水上项目</span>
                        <span>WATER PROJECTS</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(82)" href="javascript:void(0)"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/8.png" />
                        <span>陆地项目</span>
                        <span>LAND PROJECT</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(83)" href="javascript:void(0)"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/10.png" />
                        <span>趣味运动会项目</span>
                        <span>FUN SPORTS EVENTS</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(84)" href="javascript:void(0)"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/9.png" />
                        <span>高空项目</span>
                        <span>HIGH-ALTITUDE PROJECT</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(85)" href="javascript:void(0)"><img
                            src="https://admin.hqx.com.cn/Public/Group/img/11.png" />
                        <span>其他团建项目</span>
                        <span>OTHER PROJECT</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="box_b">
            <ul>
                <li v-for="rs in list" :key="rs.id">
                    <router-link target="_blank" :to="`/group/project/${rs.id}`">
                        <div class="pic">
                            <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                        </div>

                        <aside>
                            <h3>{{ rs.title }}</h3>
                            <div style="display: inline;">{{ rs.intro }}</div>
                            <span>查看详情</span>
                        </aside>

                    </router-link>
                </li>
            </ul>
        </div>
        <web-footer />
    <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { group_items } from "@/api/travel.js";
import { useRoute } from "vue-router";
const route = useRoute();

// 后续内容变多做懒加载
let list = ref([]);
let changeList = async (type2) => {
    let res = await group_items({
        ctype: 71,
        type2,
        page: 1,
        limit: 20,
    });
    list.value = res.data;
};

onMounted(async () => {
    let ajax = {
        ctype: 71,
        page: 1,
        limit: 20,
    }
    if (route.query.id) {
        ajax.type2 = route.query.id - 0;
    }
    let res = await group_items(ajax); 
    list.value = res.data;
});

</script>

<style lang="scss" scoped>
@import "../../css/main_group_project_list.css";
</style>
